<template>
  <div id="app">
    <div id="box">
      <h2 style="margin-top:60px">注册功能</h2>
      <div id="inner">
        <div style="text-align:left" class="top">
            用户名：<input type="text" placeholder="请输入用户名" @blur="changeName($event)" v-model="ruleName.username">
        </div>
        <div style="text-align:left" class="bottom">
            密码：<input type="password" placeholder="请输入密码" class="pas" @blur="changePass($event)" v-model="ruleName.password">
        </div>

        <div class="but">
          <button @click="go">去登陆</button>
          <button @click="submit()">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import url from '../config/url'
  export default {
    data(){
      return{
        ruleName:{
          username:'',
          password:''
        }
      }
    },
    methods:{
      changeName(event){
        let value = event.target.value;
        if(!/^[a-zA-z0-9]{2,}$/.test(value)){
          this.$tip('请填写正确的用户名！');
          event.target.value = '';
        }else{
          event.target.style.borderColor='green'
        }
      },
      changePass(event){
        let value = event.target.value;
        if(!/^[a-zA-Z0-9]{6,12}$/.test(value)){
          this.$tip('请填写有效的密码！');
          event.target.value = '';
        }else{
          event.target.style.borderColor='green'
        }
      },
      submit(){
        this.$http.post(url.register,{
          username:this.ruleName.username,
          password:this.ruleName.password
        })
        .then((res) => {
          console.log(res);
          if(res.data.code === 0){
            this.$message({
              message:'注册成功',
              type:'success',
              duration:1000,
              onClose:() => {
                this.$router.push('/login')
              }
            })
          }else{
            this.$message({
              message:'注册失败',
              type:'error',
              duration:1000,
            })
          }
        })
      },
      go(){
        this.$router.replace('/login');
      }
    }
  }
</script>

<style lang="scss" scoped>
#app{
    background-image: url(../assets/images/back.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  #box{
    position: absolute;
    right: 100px;
    top:100px;
    width: 350px;
    height: 400px;
    background-color: rgb(179, 103, 143,.5);
    text-align: center;
    // overflow: hidden;
    border-radius:20px;
    #inner{
      position: absolute;
      top: 120px;
      left: 36px;
      width: 300px;
      font-weight: bold;
      .top{
        margin-bottom: 38px;
      }
      input{
        width: 200px;
        height: 40px;
        border: 0;
        background-color: rgba(247, 146, 200, 0.5);
        padding-left: 10px;
        color: #fff;
        font-weight: bold;
      }
      .pas{
        margin-left: 15px;
      }
      .but{
        margin-top: 30px;
        margin-left: -34px;
        button{
          width: 80px;
          height: 30px;
          text-align: center;
          margin-left: 10px;
          background-color: rgb(244, 154, 169);
          border: 0;
        }
      }
    }
  }
</style>